<template>
	<view>
		<view class="content">
			<view class="content_top">
				<!-- 导航栏 -->
				<view class="main">
					<view class="banner_top" :style="'padding-top:'+name_top+'px;'" :class="{ 'fixed': isFixed }">
						<view class="nav">
							<view class="nav_search">
								<component-search propPlaceholder="关键字,名称,款号搜索" propBgColor="#f2f2f2"
									@iconClick="iconClick" :suffixIconOnEvent="true"></component-search>
							</view>
						</view>
						<!-- 款式 -->
						<view class="gold_category_list">
							<view class="gold_category_item" v-for="(item,index) in gold_category_list" :key="item.id"
								@click="gold_category(item.id)">
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="banner">
					<swiper class="swiper-main" indicator-dots="true" interval="3000" autoplay="true" circular="true">
						<swiper-item class="swiper-item" v-for="(item,index) in banners" :key="index"
							:data-index="index" @click="banner_envent">
							<image :src="item.images_url" mode="widthFix"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 申请加盟商  Apply for franchisee -->
			<view class="Apply_franchisee" @click="apply" v-if="vipCertification!='1'">
				<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/30/07718819f4b34abea5e74c329130618b.jpg"
					mode="widthFix"></image>
			</view>
			<!-- 品类 -->
			<view class="category" v-for="(item,index) in category_list"
				:class="{'silver-style': item.name === '银饰','synthesis-style':item.name === '珠宝','platinum-style':item.name === '铂金'}">
				<view class="category_title"
					:class="{'silver_title': item.name === '银饰','synthesis_title': item.name === '珠宝','platinum_title':item.name === '铂金'}"
					@click="category(item.id)">
					<view class="category_title_name">{{item.name}}</view>
				</view>
				<view class="category_list">
					<view class="category_item" v-for="(info,infoIndex) in item.children" :key="info.id"
						@click="category(info.id)"
						:class="{'gold_item':item.name === '黄金' ,'silver_item': item.name === '银饰','synthesis_item': item.name === '珠宝','platinum_item':item.name === '铂金'}">
						<view class="">{{info.name}}</view>
						<image :src="info.images_url" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 甄选系列 -->
			<view class="brand_list">
				<view class="brand_item" v-for="(item,index) in brand_list" :key="index" @click="brand(item.id)">
					<image :src="item.images_url" mode="widthFix"></image>
				</view>
			</view>
			<!-- 当季款、经典款 -->
			<view class="sellWell">
				<view class="sellWell_title">雅韵天成，镌刻珠宝华章</view>
				<view class="sellWell_tip">每一件珠宝都承载着独特的故事和价值</view>
				<!-- 当季款 -->
				<view class="sellWell_new">
					<view class="sellWell_new_title">{{seasonal_style.describe}} <text>seasonal style</text> </view>
					<view class="sellWell_new_list">
						<view class="sellWell_new_item" v-for="(itemInfo,indexInfo) in seasonal_style.goods_list"
							:key="indexInfo" v-if="indexInfo < 3" @click="OnDetail(itemInfo.goods_id)">
							<image :src="itemInfo.images" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<!-- 经典款 -->
				<view class="classic_new">
					<view class="classic_new_title">{{classic_style.describe}} <text>classic style</text> </view>
					<view class="classic_new_list">
						<view class="classic_new_item" v-for="(itemInfo,indexInfo) in classic_style.goods_list"
							:key="indexInfo" v-if="indexInfo >= (classic_style && classic_style.goods_list && classic_style.goods_list.length - 3)"  @click="OnDetail(itemInfo.goods_id)">
							<image :src="itemInfo.images" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<!-- 视频 -->
				<view class="video">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/04/12/17e4ce115854491385e53ea4980f3d70.png"
						mode="widthFix"></image>
				</view>
			</view>
			<!-- 新品推介 -->
			<view class="newProduct">
				<view class="newProduct_title">新品推介</view>
				<view class="newProduct_tip">与珠宝展开一场跨越时光的浪漫邂逅</view>
				<view class="newProduct_list">
					<view class="newProduct_left">
						<image
							src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/04/12/1a7ff501362247c8a4cd8e4db5f28f8c.jpg"
							mode="widthFix"></image>
					</view>
					<view class="newProduct_right">
						<view class="newProduct_right_item">
							<image
								src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/04/12/304e1e5ec45f4ac29c047ace8c47b89c.jpg"
								mode="widthFix"></image>
						</view>
						<view class="newProduct_right_item">
							<image
								src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/04/12/b95c82446a094ed7b3868ec019cd14c2.jpg"
								mode="widthFix"></image>
						</view>
						<view class="newProduct_right_item">
							<image
								src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/04/12/37a1bce4f4e54d91a0a94f49c70bed89.jpg"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
				<!-- 以金铸梦，珍藏每一刻永恒 -->
				<view class="newProduct_foot">
					<view class="">-- 以金铸梦，珍藏每一刻永恒 --</view>
					<view class="newProduct_foot_tip">CHOW TAI KING</view>
				</view>
			</view>
			<!-- 畅销款 -->
			<view class="seller">
				<view class="seller_title">{{best_style.describe}}</view>
				<view class="seller_list">
					<view class="seller_item" v-for="(itemInfo,indexInfo) in best_style.goods_list" :key="indexInfo"
						@click="OnDetail(itemInfo.goods_id)">
						<image :src="itemInfo.images" mode="widthFix"></image>
						<view class="seller_info">
							<view class="seller_name">{{itemInfo.title}}</view>
							<view class="seller_price">￥{{itemInfo.price}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 在线客服 -->
			<movable-area class="online-service-movable-container"
				:style="'height: calc(100% - '+ height_dec_service +'rpx);top:'+serviceTop+'rpx;'">
				<movable-view direction="all" :x="serviceX" :y="serviceY" :animation="false"
					class="online-service-event-submit service">
					<button open-type="contact">
						<image
							src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/d51dd4003c4f47f5aed2846d21817cc2.png"
							mode="widthFix"></image>
					</button>
				</movable-view>
			</movable-area>
			<!-- 底部 -->
			<view class="footer">
				<view class="footer_title">MoXi墨曦珠宝科技</view>
				<view class="footer_tip">提供技术支持</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import componentSearch from "../../components/search/search.vue";
	export default {
		data() {
			return {
				banners: [],
				brand_list: [],
				gold_category_list: [],
				category_list: [],
				admin_token: "",
				entryTime: 0,
				timer: null,
				user: {},
				avatar: app.globalData.data.default_user_head_src,
				user_avatar: "",
				userCard: {},
				// 客服
				system_service: null,
				serviceX: 0,
				serviceY: 0,
				serviceTop: 0,
				height_dec_service: 0,
				// 切换后台
				system_back: null,
				backX: 0,
				backY: 0,
				backTop: 0,
				height_dec_back: 0,
				name_top: '',
				timeout: 8 * 1000, // 心跳检测时间
				timeoutObj: null,
				glod_list: [],
				seasonal_style: {}, //当季款
				classic_style: {}, //经典款
				best_style: {}, // 畅销款
				glod_items: [{
						code: "JZJ_au",
						cnname: "黄 金",
						decimals: 2
					},
					{
						code: "JZJ_ag",
						cnname: "白 银",
						decimals: 3
					},
					{
						code: "JZJ_pt",
						cnname: "铂 金",
						decimals: 2
					},
					{
						code: "JZJ_pd",
						cnname: "钯 金",
						decimals: 2
					},

					{
						cnname: "黄金9999",
						code: "Au99.99",
						decimals: 2
					},
					{
						cnname: "铂金9995",
						code: "Pt99.95",
						decimals: 2
					},
					{
						code: "Ag(T+D)",
						cnname: "白银T+D",
						decimals: 3
					}
				],
				vipCertification: 0,
				isFixed: false,
				roleName: '',
				pageTop: 0,
			}
		},
		// 分享给朋友
		onShareAppMessage(res) {
			return {
				title: app.globalData.data.tenantName,
				path: "pages/index/index?numberId=" + app.globalData.data.numberId,
				mpId: app.globalData.data.appid
			}
		},
		components: {
			componentSearch
		},
		created() {
			var system = app.globalData.get_system_info(null, null, true);
			var width = app.globalData.window_width_handle(system.windowWidth);
			var height = app.globalData.window_height_handle(system);
			// 客服
			this.system_service = system;
			this.serviceX = width - 43;
			this.serviceY = height - 200;
			this.serviceTop = 0;
			this.height_dec_service = 0;
			// 切换后台
			this.system_back = system;
			this.backX = width - 43;
			this.backY = height - 260;
			this.backTop = 0;
			this.height_dec_back = 0;
		},
		mounted() {
			uni.createSelectorQuery().select('.main').boundingClientRect(rect => {
					this.pageTop = rect.top;
				})
				.exec();
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		methods: {
			iconClick(type) {
				app.globalData.showToast('点击了右侧的图标');
			},
			// 页面浮动
			onPageScroll(e) {
				const scrollTop = e.scrollTop;
				if (scrollTop > this.pageTop) {
					this.isFixed = true;
				} else {
					this.isFixed = false;
				}
			},
			init(e) {
				this.user = app.globalData.get_user_info(this, "init", "");
				if (this.user != false) {
					const demo = uni.getMenuButtonBoundingClientRect();
					this.name_top = demo.top;
					this.vipCertification = this.user.vipCertification;
					this.roleName = this.user.roleName;
					this.getIndex();
				}
			},
			// 获取首页数据
			getIndex() {
				uni.showLoading({
					title: "正在加载中..."
				})
				let url = app.globalData.get_request_url("index");
				uni.request({
					url: url + '&type=0',
					success: (res) => {
						if (res.data.code == 200) {
							var data = res.data.data;
							this.banners = data.banner_list;
							this.brand_list = data.brand_list;
							this.gold_category_list = data.gold_category_list; // 款式
							this.category_list = data.category_list.filter(item => item.name === '黄金' || item
								.name === '银饰' || item.name === '珠宝' || item.name === '铂金');
							this.seasonal_style = data.plugins_activity_data.data[0]; //当季款
							this.classic_style = data.plugins_activity_data.data[1]; //经典款
							this.best_style = data.plugins_activity_data.data[2]; //畅销款
							// 自定义排序  大品类
							let ca = [{
									name: "黄金"
								},
								{
									name: "铂金"
								},
								{
									name: "银饰"
								},
								{
									name: "珠宝"
								}
							];
							if (this.category_list != null) {
								let cl_list = [];
								let cpl_list = this.category_list;
								for (let i = 0; i < ca.length; i++) {
									let citem = ca[i];
									for (let j = 0; j < cpl_list.length; j++) {
										let ditem = cpl_list[j];
										if (citem.name == ditem.name) {
											cl_list.push(ditem);
											break;
										}
									}
								}
								this.category_list = cl_list || [];
							}

						} else {
							if (app.globalData.is_login_check(res.data, this, 'get_data')) {
								uni.showToast({
									icon: 'none',
									title: res.data.msg,
									duration: 3000
								});
							}
						}
						uni.hideLoading();
					}
				})
			},
			// 获取金价数据
			closeSocket() {
				if (this.timeoutObj) {
					uni.closeSocket({
						code: 200,
						success() {
							console.log("正常关闭")
						}
					})
					clearInterval(this.timeoutObj);
				}
			},
			// 检测心跳reset
			reset() {
				clearInterval(this.timeoutObj);
				this.start();
			},
			// 启动心跳 start 
			start() {
				let that = this;
				if (this.timeoutObj) {
					clearInterval(this.timeoutObj);
				}
				this.timeoutObj = setInterval(function() {
					uni.sendSocketMessage({
						data: 'heartCheck',
						success: (res) => {
							console.log('连接中....', res);
						},
						fail: (err) => {
							console.log('连接失败重新连接....');
							that.onSocket();
						}
					});
				}, this.timeout);
			},
			formatNumber(num, digits) {
				if (!isNaN(num)) {
					let formatted = parseFloat(num).toFixed(digits);
					return parseFloat(formatted);
				} else {
					return 0;
				}
			},
			sendSocketMessage() {
				return new Promise((resolve, reject) => {
					uni.sendSocketMessage({
						data: 'heartCheck',
						success: (res) => {
							resolve(true);
						},
						fail: (err) => {
							resolve(false);
						}
					});
				});
			},
			connectSocket() {
				let that = this;
				var randomInt = Math.floor(Math.random() * 10) + 1;
				// uni.connectSocket({
				// 	url: 'wss://www.moxikeji.com.cn/ws/websocket/meages/' + app.globalData.data.tenantId + "/" +
				// 		randomInt + Date.now()
				// });
				uni.onSocketOpen(function(res) {
					uni.onSocketMessage(function(res) {
						that.reset(); // 检测心跳reset,防止长时间连接导致连接关闭
						let currentTime = new Date();
						let year = currentTime.getFullYear();
						let month = currentTime.getMonth() + 1;
						let date = currentTime.getDate();
						let hours = that.addZero(currentTime.getHours());
						let minutes = that.addZero(currentTime.getMinutes());
						let seconds = that.addZero(currentTime.getSeconds());
						that.currentTime = `${year}/${month}/${date} ${hours}:${minutes}:${seconds}`;
						const obj = JSON.parse(res.data);
						if (obj.items != null) {
							let g_list = [];
							let dg_list = obj.items;
							for (let i = 0; i < that.glod_items.length; i++) {
								let item = that.glod_items[i];
								for (let j = 0; j < dg_list.length; j++) {
									let ditem = dg_list[j];
									if (item.code == ditem.code) {
										ditem["decimals"] = item.decimals;
										g_list.push(ditem);
										break;
									}
								}
							}
							that.glod_list = g_list || [];
						}
					});
				});
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
			},
			onSocket() {
				let that = this;
				const result = this.sendSocketMessage();
				result.then(function(vue) {
					if (vue == false) {
						that.connectSocket();
					}
				}, function(err) {
					that.connectSocket();

				});
			},
			addZero(i) {
				if (i < 10) {
					i = "0" + i;
				}
				return i;
			},
			// 轮播图绑定事件
			banner_envent(e) {
				var index = e.currentTarget.dataset.index;
				if (index === 1 && this.vipCertification != '1') {
					this.apply()
				}
			},
			// 跳转申请域名页面
			apply() {
				uni.navigateTo({
					url: '/pages/apply/apply'
				})
			},
			// 款式
			gold_category(cate_id) {
				uni.navigateTo({
					url: "/pages/goods_ring/goods_ring?cate_id=" + cate_id
				})
			},
			// 品类
			category(category_id) {
				uni.navigateTo({
					url: "/pages/goods_ring/goods_ring?category_id=" + category_id
				})
			},
			// 系列
			brand(brand) {
				var type = '甄选'
				uni.navigateTo({
					url: "/pages/goods_ring/goods_ring?brand=" + brand + '&type=' + type
				})
			},
			// 跳转详情
			OnDetail(id) {
				uni.navigateTo({
					url: "/pages/goods_detail/goods_detail?id=" + id
				})
			},
			// 跳转雷达
			Onradar() {
				uni.navigateTo({
					url: "/pages/user_radar/user_radar"
				})
			},
			OnEntryTime() {
				var radarlog_data = {
					pageUrl: "pages/index/index",
					name: "首页",
					remark: "首页停留时间",
					entryTime: this.entryTime,
				}
				uni.request({
					url: app.globalData.get_request_url("radarlog/add"),
					data: radarlog_data,
					method: "POST",
					success: (res) => {
						// console.log(res, "首页停留时间");
					}
				})
			},
			// 跳转到修改名片
			OnCard() {
				uni.navigateTo({
					url: "/pages/card_modify/card_modify"
				})
			},
		},
		onLoad(params) {
			if (typeof(params) != 'undefined') {
				var numberId = params.numberId || '';
				if (numberId != '') {
					uni.clearStorageSync();
					app.globalData.data.numberId = numberId;
				}
			}
		},
		onShow() {
			// 记录用户进来时间
			this.entryTime = Date.now();
			this.admin_token = app.globalData.data.admin_token;
			// this.onSocket();
			this.init();
		},
		// onUnload() {
		// 	this.closeSocket();
		// },
		onHide() {
			this.OnEntryTime();
		},
		onPullDownRefresh() {
			var that = this;
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.init();
			}, 1000);
		}
	}
</script>

<style lang="less">
	.fixed {
		width: 100%;
		height: 170rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: linear-gradient(to bottom, #e66747, #eaa391);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	page {
		background-color: #f7f8fa;
	}

	.content_top {
		// background: linear-gradient(to bottom, #7f2923, #e1c790, #f1d1d2, #f2f2f2);
		background: linear-gradient(to bottom, #e66747, #e87c60, #e9917b, #ea9d8b);

		.main {
			.banner_top {

				/* 头部导航--搜索 */
				.nav {
					width: 100%;
					height: 50px;
					padding-bottom: 10rpx;
					display: flex;
					align-items: center;
					align-items: center;
					margin-top: -30rpx !important;

					/* 搜索框 */
					.nav_search {
						position: relative;
						// width: 40%;
						width: 60%;
						height: 30px;
						opacity: 0.5;
						border-radius: 20px;
						line-height: 20px;
						margin-top: 20rpx;
						border: 1px solid #e6c676;
						background-color: white;
						border-radius: 10rpx !important;
						font-size: 10px !important;
						margin-left: 20rpx;
					}

					.nav_price {
						margin-right: 10px;
						margin-left: 5px;
						color: #fcaf00;
						height: 60px;
						width: 100px;
						margin-top: 20px;

						.swiper-container {
							height: 100%;
							width: 100%;

							.swiper-slide {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								height: 60px;
								width: 100%;
								padding: 10px;
								box-sizing: border-box;

								.sslj {
									width: 120rpx;
									height: 20px;
									line-height: 22px;
									text-align: center;
									font-size: 9px;
									border-radius: 5px;
									border: 1px solid #fcaf00;
								}
							}
						}
					}
				}

				// 款式
				.gold_category_list {
					display: flex;
					overflow-x: auto;
					white-space: nowrap;
					padding: 20rpx;
					color: white;

					.gold_category_item {
						margin-left: 20rpx;
						flex-shrink: 0;
					}

					.gold_category_name {
						border-bottom: 1px solid white;
					}
				}
			}
		}

		// 轮播图
		.banner {
			width: 99%;
			margin: auto;

			.swiper-main {
				width: 100%;
				// height: 33vh !important;
				height: 80vh !important;

				.swiper-item {
					width: 100%;
					// height: 33vh !important;
					height: 80vh !important;

					image {
						width: 100% !important;
						// height: 33vh !important;
						height: 80vh !important;
						border-radius: 10rpx;
					}
				}
			}
		}
	}

	// 申请加盟商
	.Apply_franchisee {
		margin: 10rpx;

		image {
			width: 100%;
			border-radius: 10rpx;
		}
	}

	// 款式
	// 铂金
	.platinum-style {
		background: linear-gradient(to bottom, #f3e2ff, #dec3f1) !important;
		border: 2px solid #d4abf3 !important;

		.platinum_title {
			border-left: 5px solid #bb54eb !important;
		}
	}

	// 银饰
	.silver-style {
		background: linear-gradient(to bottom, #ededfa, #ccc9e7) !important;
		border: 2px solid #b7b3da !important;

		.silver_title {
			border-left: 5px solid #aba2b4 !important;
		}
	}

	// 珠宝
	.synthesis-style {
		background: linear-gradient(to bottom, #fbdce1, #fec6cf) !important;
		border: 2px solid #fdb5c0;

		.synthesis_title {
			border-left: 5px solid #f97e92 !important;
		}
	}

	.category {
		padding: 20rpx;
		background: linear-gradient(to bottom, #fff0df, #ffd7ba);
		border: 2px solid #ffc08b;
		border-radius: 20rpx;
		margin: 10rpx;

		.category_title {
			border-left: 5px solid #c03d29;
			padding-left: 10rpx;
			display: flex;
			align-items: center;

			.category_title_name {
				font-weight: bold;
			}

			.category_title_inventory {
				padding-left: 20rpx;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				padding-right: 10rpx;
				border-radius: 40rpx;
				font-size: 11px;
				background-color: #fbffff;
				color: #030200;
				margin-left: 40rpx;

				text {
					color: red;
					padding-left: 10rpx;
					padding-right: 10rpx;
				}
			}
		}

		.category_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.category_item {
				width: 17%;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				border: #fffff7 2px solid;
				border-radius: 20rpx;
				color: #2f291d;
				margin-right: 8rpx;
				margin-bottom: 10rpx;

				image {
					width: 90rpx;
				}
			}

			// 黄金
			.gold_item {
				background: linear-gradient(to bottom, #fff5ce, #fffefc);
			}

			// 铂金
			.platinum_item {
				background: linear-gradient(to bottom, #f2e1ff, #ffffff);
			}

			// 银饰
			.silver_item {
				background: linear-gradient(to bottom, #eceefa, #f3f6fd, #fdfeff);
			}

			// 珠宝
			.synthesis_item {
				background: linear-gradient(to bottom, #ffe4e8, #fff2f4, #ffffff);
			}
		}
	}

	// 甄选系列
	.brand_list {
		margin: 10rpx;

		.brand_item {
			image {
				width: 100%;
				border-radius: 10rpx;
			}
		}
	}

	// 新品、热销 
	.sellWell {
		margin: 10rpx;
		height: 1400rpx;
		max-height: 1400rpx;
		background-image: url('https://t1.chowtaiking.com.cn/img/ruoyi/2025/04/12/09bf75ce2bfb4ce2bd538e2f9ee3b65c.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

		.sellWell_title {
			text-align: center;
			padding-top: 40rpx;
			color: white;
			font-family: '宋体';
			font-weight: bold;
			font-size: 20px;
		}

		.sellWell_tip {
			text-align: center;
			padding-top: 20rpx;
			color: white;
			font-family: '宋体';
			font-size: 13px;
		}

		// 当季款
		.sellWell_new {
			margin: 20rpx;
			height: 380rpx;
			max-height: 380rpx;
			background-image: url('https://t1.chowtaiking.com.cn/img/ruoyi/2025/04/12/60a56b9fef414fb2a578fcfffc1c189d.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;

			.sellWell_new_title {
				padding-left: 20rpx;
				padding-top: 40rpx;
				color: #922023;
				font-family: '宋体';
				font-size: 18px;
				font-weight: bold;

				text {
					color: #922023;
					font-family: '宋体';
					font-size: 14px;
				}
			}

			.sellWell_new_list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;

				.sellWell_new_item {
					margin-top: 40rpx;

					image {
						width: 200rpx;
					}
				}
			}
		}

		// 经典款
		.classic_new {
			margin: 20rpx;
			height: 380rpx;
			max-height: 380rpx;
			background-image: url('https://t1.chowtaiking.com.cn/img/ruoyi/2025/04/12/a3844b3de7474549829629dcb2d501df.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;

			.classic_new_title {
				padding-left: 20rpx;
				padding-top: 40rpx;
				color: #922023;
				font-family: '宋体';
				font-size: 18px;
				font-weight: bold;

				text {
					color: #922023;
					font-family: '宋体';
					font-size: 14px;
				}
			}

			.classic_new_list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;

				.classic_new_item {
					margin-top: 40rpx;

					image {
						width: 200rpx;
					}
				}
			}
		}

		// 视频
		.video {
			margin: 20rpx;
			height: 400rpx;

			image {
				width: 100%;
			}
		}
	}

	// 新品推介
	.newProduct {
		.newProduct_title {
			color: #922023;
			font-size: 25px;
			font-weight: bold;
			text-align: center;
			padding-top: 20rpx;
			font-family: '宋体';
		}

		.newProduct_tip {
			color: #922023;
			font-size: 16px;
			text-align: center;
			padding-top: 20rpx;
		}

		.newProduct_list {
			margin: 10rpx;
			display: flex;

			.newProduct_left {
				width: 63%;
				max-height: 800rpx;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.newProduct_right {
				width: 30%;
				max-height: 800rpx;
				margin-left: 20rpx;

				.newProduct_right_item {
					width: 100%;
					height: 248rpx;

					&:not(:last-child) {
						margin-bottom: 10rpx;
					}

					image {
						width: 248rpx;
						height: 248rpx;
					}
				}
			}
		}

		.newProduct_foot {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #af5c5a;
			font-size: 15px;

			.newProduct_foot_tip {
				color: #cb9991;
				font-size: 13px;
				padding-top: 10rpx;
			}
		}
	}

	// 当季款 经典款 畅销款
	.seller {
		margin: 10rpx;

		.seller_title {
			border-left: 5px solid #ea3931;
			padding-left: 10rpx;
		}

		.seller_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 20rpx;

			.seller_item {
				width: 48.5%;
				border: 2px solid #f2f2f2;
				border-radius: 10rpx;
				margin-bottom: 10rpx;

				image {
					width: 100%;
				}

				.seller_info {
					font-size: 14px;

					.seller_name {
						font-size: 13px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 90%;
						padding-left: 20rpx;
						padding-bottom: 20rpx;
					}

					.seller_price {
						color: red;
					}
				}
			}
		}
	}

	// 底部
	.footer {
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: rgba(0, 0, 0, 0.2);

		.footer_title {
			font-size: 14px;
		}

		.footer_tip {
			font-size: 12px;
		}
	}

	// 购物车
	.cart_info {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 3%;
		right: 20rpx;
		background-color: rgba(0, 0, 0, 0.2);
		// background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 70rpx;
		}
	}

	// 在线客服
	.service {
		width: 60px;
		height: 60px;
		border-radius: 50%;

		// background-color: rgba(0, 0, 0, 0.4);
		button {
			width: 60px;
			padding: 0;
			border: 0;
			line-height: initial;
			font-size: 24rpx;
			background: transparent;

			image {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60px;
				margin: 10rpx 0 5rpx 0;
			}
		}

		::after {
			border: none;
		}
	}

	/* 切换后台 */
	.switch {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.2);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 1000;

		.switch_name {
			color: white;
			font-size: 12px;
		}
	}

	.online-service-event-submit button {
		width: 60px;
		height: 60px;
		border: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.online-service-event-submit {
		pointer-events: auto;
	}

	.online-service-movable-container {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: transparent;
		pointer-events: none;
		z-index: 2;
	}
</style>